<template>

<el-container class="home_container">
    <!-- 头部区域 -->
  <el-header>
      <div class="title">
          <h2 class="iconfont icon-xitong"></h2>
          <h2>电商管理后台</h2>
      </div>
      <el-button type="primary" @click = 'withdraw'>退出</el-button>
  </el-header>
    <el-container>
     
    <!-- 侧边栏 -->
    <el-aside :width="isMenuFold ? '60px' : '200px'">
        <div class="toggle-button iconfont icon-zhankaizhedie" @click="menuFold"></div>
        <!-- 侧边栏菜单区域 -->
            <el-menu
            background-color="#324157"
            text-color="#fff"
            active-text-color="#e67e22"
             unique-opened :collapse='isMenuFold' 
             :collapse-transition='false' 
              :default-active='$route.path'
             router>
                <!-- 一级菜单 -->
            <el-submenu :index="item.id+''" v-for="item in menuList" :key = 'item.id'>
                <!-- 一级菜单模板 -->
                <template slot="title">
                    <!-- 图标 -->
                    <i :class="icontObj[item.id]"></i>
                    <!-- 文本 -->
                    <span>{{item.authName}}</span>
                </template>

                    <!-- 二级菜单 -->   
                    <el-menu-item :index="'/'+subItem.path " v-for="subItem in item.children" :key='subItem.id' @click="">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>{{subItem.authName}}</span>
                        </template>
                    </el-menu-item>

            </el-submenu>
            </el-menu>
        </el-aside>
        <!--  主体区域-->
        <el-main>

            <router-view></router-view>
        </el-main>
    </el-container> 
</el-container>
</template>

<script>
export default {
    name:'home',
    data(){
        return{
            menuList:[],
            // 菜单是否折叠
            isMenuFold: false,
            // 一级菜单图标对象
            icontObj:{
                '125':'iconfont icon-yonghu',
                '103':'iconfont icon-quanxian',
                '101':'iconfont icon-ziyuan',
                '102':'iconfont icon-dingdan',
                '145':'iconfont icon-shuju'
            },
        }
    },
    created(){
        this.getMenuList();
    },
    methods:{
        withdraw(){
            // 退出跳转到登录页
            window.sessionStorage.clear(),
            this.$router.push('/login')
        },
        // 获取所有菜单
        async getMenuList(){
            const {data : res} = await this.$http.get('/menus')
            // 数据请求失败提示
            if(res.meta.status !== 200) return this.$Message.error(res.meta.msg)
                this.menuList = res.data
        },
        menuFold(){
           this.isMenuFold = !this.isMenuFold
        },

    },
    
}
</script>

<style lang="less" scoped>

.home_container{
    width: 100%;
    height:100%;
}
    .el-header{
        background-color:#324157;
        display:flex;
        justify-content:space-between;
        align-items:center;
        height: 50px;
        .title{
            width: 300px;
            height: 100%;
            background-color:#324157;
            display:flex;
            align-items:center;
            h2{
                color:#fff;
                font-size:25px;
                font-weight:900;
                margin-left:15px;
               letter-spacing:0.3rem;
            }
        }
        .el-button {
            padding:0;  
            width: 70px;
            height: 35px;
            line-height:35px;
        }
    }
    .el-container{

        .el-aside{
            width: 100%;
            height: 100%;
            transition: all 0.3s ease-out;
            background-color:#324157;
        }
    }
   .el-aside{
       .toggle-button{
           width: 100%;
           height: 40px;
           text-align: center;
           line-height: 40px;
           color: #fff;
           background-color:#4c5563
       }
       .el-submenu {
            .iconfont{
                margin-right:10px;
            }
           }
       .el-menu{
           border-right:0;
       }

   } 
</style>